<template>
	<view class="Exhibition">
		<!-- <u-navbar>
			<view class="preservation" slot="right">保存</view>
		</u-navbar> -->
		<view class="ExhibitionBox">
			<view class="ImageList" v-if="ImageList.length>0">
				<view class="ImageItem" v-for="(item,index) in ImageList" @click="preview(index)">
					<image :src="getImage(item)" mode="aspectFill" class="imgItem"></image>
					<image src="../../static/mine/del.png" class="imgDel" mode="widthFix" :data-index="index" @click.stop="delImg"></image>
				</view>
			</view>
			<view class="uploadBox" @click="uploadBtn">
				<image src="/static/mine/upload.png" mode=""></image>
			</view>
		</view>
		<view class="submit" @click="saveImg">保存</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				ImageList:[],
				reqFlag:true
			}
		},
		onLoad(options) {
      // #ifdef APP-PLUS
      var args = plus.runtime.arguments;
      if(args){
        app.$vm.setShareDetail(args);
      }
      // #endif
			this.id = options.id;
			if(uni.getStorageSync("imgDatas")){
				this.ImageList = uni.getStorageSync("imgDatas");
			}
			
		},
		methods: {
			delImg(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				this.ImageList.splice(index,1);
			},
			saveImg(){
				if(!this.reqFlag){
					return false;
				}
				let obj = {};
				obj.shop_id = this.id;
				obj.data = this.ImageList;
				this.reqFlag = false;
				this.$u.api.shopRotationImageEdit(obj).then(res => {
					console.log(res)
					this.$refs.uToast.show({
						title: "修改成功",
						type: "success",
						duration: 2000
					})
					let page = getCurrentPages();
					page[page.length-2].$vm.getDetail();
					setTimeout(()=>{
						this.reqFlag = true;
						uni.navigateBack({
							delta:1
						})
					},1500)
				}).catch(err=>{
					this.reqFlag = true;
				})
			},
			getImage(url){
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			preview(index){
				let arr = [];
				for(let i=0;i<this.ImageList.length;i++){
					arr.push(this.getImage(this.ImageList[i]));
				}
				uni.previewImage({
					current:arr[index],
					urls:arr
				})
			},
			uploadBtn(){
				let _this = this;
				uni.chooseImage({
				    count: 9, //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (result) {
						uni.showLoading({
							title:"上传图片中..."
						})
						_this.reqFlag = false;
						let j = result.tempFilePaths.length;
						for(let i=0;i<result.tempFilePaths.length;i++){
							app.$vm.updataAvator(result.tempFilePaths[i]).then(res=>{
								j--;
								_this.ImageList.push(res)
								if(j==0){
									_this.reqFlag = true;
									uni.hideLoading();
								}
							});
						}
				    },
					fail:err=>{
						if(err.errMsg!='chooseImage:fail cancel'){
							app.$vm.checkAuth("scope.camera").then(resultConfirm=>{
								if(resultConfirm){
									uni.showModal({
										title:"系统繁忙，请稍后再试"
									})
								}else{
									uni.showModal({
										title:"请检查摄像头和相册权限后重试"
									})
								}
							})
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.submit{
		width: 702upx;
		height: 88upx;
		line-height: 88upx;
		border-radius: 8upx;
		background: #FFAC3F;
		text-align: center;
		font-size: 28upx;
		color: white;
		position: fixed;
		left: 24upx;
		bottom: 30upx;
	}
.Exhibition{
	// background-color: #F3F3F3;
	height: 100vh;
	overflow: auto;
	padding-bottom: 140upx;
	// padding-top: 104upx;
	.preservation{
		padding-right: 24upx;
		font-size: 32upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFAC3F;
	}
	.ExhibitionBox{
		padding: 16upx 24upx;
		// background-color: #fff;
		.ImageList{
			margin-bottom: 32upx;
			.ImageItem{
				width: 702upx;
				height: 352upx;
				opacity: 1;
				border-radius: 8upx;
				margin-bottom: 90upx;
				position: relative;
				.imgItem{
					width: 100%;
					height: 100%;
					border-radius: 8upx;
				}
				.imgDel{
					width: 50upx;
					position: absolute;
					right: 0;
					bottom: -70upx;
				}
			}
		}
		.uploadBox{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 702upx;
			height: 352upx;
			border: 2upx dashed #BFBFBF;
			opacity: 1;
			border-radius: 8upx;
			image{
				border: 2upx dashed #BFBFBF;
				width: 96upx;
				height: 96upx;
			}
		}
	}
}
</style>
